<template>
  <div class="wrap">
    <!-- head -->
    <div class="head" v-if="dataReady">
      <div class="my-head" :class="{isFail:myInfo.score<oInfo.score}">
        <img :src="myInfo.basicInfo.avatarUrl"> {{myInfo.ansList[current].appendScore||0}}
      </div>
      <div class="o-head" :class="{isFail:myInfo.score>oInfo.score}">
        <img :src="oInfo.basicInfo.avatarUrl"> {{oInfo.ansList[current].appendScore||0}}
      </div>
      <div class="swiper-index">{{current+1}}/5</div>
    </div>
    <div class="name" v-if="dataReady">
      <div>{{myInfo.basicInfo.nickName}}</div>
      <div>{{oInfo.basicInfo.nickName}}</div>
    </div>
    <div class="swiper-wrap" v-if="dataReady">
      <img v-if="current!=0" class="left-btn" src="/static/arrow.png" @click="throttleProxy(1)">
      <img v-if="current!=4" class="right-btn" src="/static/arrow.png" @click="throttleProxy(2)">
      <swiper :current="current" @change="swiperChange">
        <swiper-item v-for="(subject,index) in subjectList" :key="index">
          <div class="content">{{subject.title}}</div>
          <div class="select-list">
            <div class="select-item" :class="{success:item.sortId==subject.optionSortId,fail:((!myInfo.ansList[current].right&&myInfo.ansList[current].answer==item.sortId)||(!oInfo.ansList[current].right&&oInfo.ansList[current].answer==item.sortId))}" v-for="(item,indexKey) in subjectList[current].optionList" :key="indexKey">
              <img v-if="myInfo.ansList[current].right&&myInfo.ansList[current].answer==item.sortId" class="left-img" src="/static/sIcon.png" alt="">
              <img v-if="!myInfo.ansList[current].right&&myInfo.ansList[current].answer==item.sortId" class="left-img" src="/static/fIcon.png" alt=""> {{item.name}}
              <img v-if="oInfo.ansList[current].right&&oInfo.ansList[current].answer==item.sortId" class="right-img" src="/static/sIcon.png" alt="">
              <img v-if="!oInfo.ansList[current].right&&oInfo.ansList[current].answer==item.sortId" class="right-img" src="/static/fIcon.png" alt="">
            </div>
          </div>
        </swiper-item>
      </swiper>
      <div class="desc">
        <div class="title">本题解析</div>
        <div class="desc-text" v-if="dataReady">{{subjectList[current].description}}</div>
        <div class="author">
          <div class="txt">━ ━ 题目来源于</div>
          <img v-if="subjectList[current].createUserUrl" :src="subjectList[current].createUserUrl" alt=""> 
          <img v-else src="/static/default-head.png" alt=""> 
          {{subjectList[current].createUserName}}
        </div>
      </div>
    </div>
    <div class="advice" @click="advice">
      <img src="/static/advice.png" alt=""> 题目纠错
    </div>
  </div>
</template>

<script>
import {throttle} from "@/utils/index"
import { mapState, mapMutations } from "vuex";
//TODO
//1.一页当一个item  item包括用户信息， 当前题目分数，选项，正确与否
export default {
  data() {
    return {
      dataReady: false,
      current: 0,
      myInfo: {
        ansList: [],
        basicInfo: {}
      },
      oInfo: {
        ansList: [],
        basicInfo: {}
      },
      subjectList: []
    };
  },
  computed: {
    ...mapState(["gameRecord", "appInfo", "IMGHEAD"])
  },
  methods: {
    initData() {
      let userList = JSON.parse(JSON.stringify(this.gameRecord.Result.userList));
      let subjectList = JSON.parse(JSON.stringify(this.gameRecord.Result.subjectList));
      this.subjectList = JSON.parse(JSON.stringify(this.gameRecord.Result.subjectList));
      for (let i = 0; i < userList.length; i++) {
        //分类用户信息
        if (this.appInfo.userId == userList[i].basicInfo.userId) {
          this.myInfo = userList[i];
          this.myInfo.ansList = [];
        } else {
          this.oInfo = userList[i];
          this.oInfo.ansList = [];
          if (userList[i].boot) {
            //机器人头像地址 加域名
            this.oInfo.basicInfo.avatarUrl= this.IMGHEAD + this.oInfo.basicInfo.avatarUrl;
          }
        }
      }

      for (let i = 0; i < subjectList.length; i++) {
        //题目列表

        for (let j = 0; j < subjectList[i].answerList.length; j++) {
          //题目里的回答列表

          if (subjectList[i].answerList[j].uid == this.appInfo.userId) {
            //分类推入 我的 或者 他的对象中
            this.myInfo.ansList.push(subjectList[i].answerList[j]);
          } else {
            this.oInfo.ansList.push(subjectList[i].answerList[j]);
          }
        }
      }
      setTimeout(() => {
        this.dataReady = true;
      }, 0);
    },
    swiperChange(event) {
      this.current = event.mp.detail.current;
    },
    pre() {
      if (this.current != 0) {
        this.current--;
      }
    },
    next() {
      if (this.current != 4) {
        this.current++;
      }
    },
    throttleProxy(str){
      if(str==1){
        throttle(this.pre(),400);
      }else{
        throttle(this.next(),400);
      }
    },
    advice() {
      this.$router.push(`/pages/questionAdvice/index?current=${this.current}`);
    }
  },
  onUnload(){
    this.current = 0;
  },
  mounted() {
    this.initData();
  }
};
</script>

<style lang="scss" scoped>
@import url("../../scss/public.scss");

.wrap {
  padding: 70rpx 40rpx 0 40rpx;
  box-sizing: border-box;
  justify-content: flex-start;
}
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .my-head,
  .o-head {
    width: 260rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;
    background: #67c29f;
    position: relative;
    border-radius: 1000rpx;
    img {
      width: 128rpx;
      height: 128rpx;
      border: 4rpx solid #fff;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
    }
  }
  .my-head {
    text-align: right;
    img {
      left: 0;
    }
  }
  .o-head {
    text-align: left;
    img {
      right: 0;
    }
  }
  .isFail {
    background: #c2c2c2;
  }
  .swiper-index {
    position: absolute;
    font-size: 60rpx;
    font-weight: bold;
    color: #67c29f;
    top: 48rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
.name {
  width: 100%;
  line-height: 1;
  font-size: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50rpx 0 24rpx;
}
.swiper-wrap {
  width: 100%;
  height: 100%;
  max-height: 630rpx;
  position: relative;
  .left-btn,
  .right-btn {
    position: absolute;
    top: 50%;
    // transform: translateY(-50%);
    width: 47rpx;
    height: 47rpx;
    z-index: 20;
  }
  .left-btn {
    left: 0;
  }
  .right-btn {
    right: 0;
    transform: rotate(180deg);
  }
}
swiper {
  width: 100%;
  height: 100%;
  max-height: 886rpx;
}
.content {
  min-height: 80rpx;
  margin-bottom: 40rpx;
  text-align: center;
}
.select-list {
  height: 458rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 40rpx;
  .select-item {
    width: 416rpx;
    height: 92rpx;
    position: relative;
    font-size: 30rpx;
    border: 3rpx solid #ababab;
    border-radius: 10rpx;
    box-sizing: border-box;
    // filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
    box-shadow: 0 0 20rpx 6rpx rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 536rpx 114rpx;
    background-repeat: repeat-y;
    background-image: url("");
    img {
      position: absolute;
      width: 28rpx;
      height: 28rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .left-img {
      left: 14rpx;
    }
    .right-img {
      right: 14rpx;
    }
  }
  .success,
  .fail {
    border: 6rpx solid #fff;
    color: #fff;
    animation: btnScale 0.4s ease;
  }

  .success {
    background: #67c29f;
  }
  .fail {
    background: #fd5c5c;
  }
}

.desc {
  width: 100%;
  height: 220rpx;
  background-size: 662rpx 220rpx;
  background-repeat: no-repeat;
  background-image: url("");
  position: relative;
  padding: 60rpx 60rpx 0 60rpx;
  box-sizing: border-box;
  .title {
    position: absolute;
    color: #67c29f;
    font-size: 40rpx;
    font-weight: bold;
    top: -20rpx;
    left: 50%;
    transform: translateX(-50%);
  }
  .desc-text {
    font-size: 30rpx;
  }
  .author {
    position: absolute;
    bottom: 10rpx;
    right: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
    font-weight: bold;
    color: #67c29f;
    .txt {
      font-size: 26rpx;
      font-weight: normal;
      color: #000;
    }
    img {
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      border: 2rpx solid #fff;
      margin: 0 10rpx;
    }
  }
}
.advice {
  position: absolute;
  top: 1128rpx;
  right: 100rpx;
  display: flex;
  font-size: 26rpx;
  align-items: center;
  img {
    width: 42rpx;
    height: 38rpx;
    margin-right: 15rpx;
  }
}
</style>
